<template>
  <div class="groupList" :class='{groupListActive:selectIndex==1,groupListLoad:download}'>
    <download @close-down='closeDowns' v-if='download'></download>
    <div class="header">
      <x-header title="车网通团购" :left-options="{backText:''}" class='whiteHeader' @click='goBack'>
        <img src="../../assets/image/group/share.png" class="wx" slot='right' @click.stop='showShareClick'>
      </x-header>
      <tab :line-width="1" custom-bar-width="2rem" v-model="selectIndex">
        <tab-item selected @on-item-click="handler">
          <span class="tabSpan">拼团商品</span>
        </tab-item>
        <tab-item @on-item-click="handler">
          <span class="tabSpan tabSpans">我的拼团</span>
        </tab-item>
      </tab>
    </div>
    <div class="allMain">
      <div class="groupLists">
        <scroller :on-infinite="infinites" ref='myScroller' :loadingLayerColor='loadColor'>
          <div class="shopList"  v-show='selectIndex==0'>
            <div class="banner" v-if='banner.length>0'>
              <swiper dots-position="center" :auto='true' :duration='300' :loop='true'>
                <swiper-item class="swiper-demo-img" v-for='(item,index) in banner' :key='index'>
                   <img :src="item.MEDIAPATH" alt="" class='swiperImg'/>
                </swiper-item>
              </swiper>
            </div>
            <div class="allList">
              <div class="listItem" v-for='item in allList' @click='goGroupDetail(item.SERVDETAIL_ID)'>
                <div class="shopHead">
                  <img :src="item.SERVDETAIL_PHOTO" alt="" />
                  <div class="downTime" :class='{downTimeDay:item.downObj.day>0}' v-if='item.downObj'>距结束 <span v-if='item.downObj.day>0'>{{item.downObj.day}}天</span>{{item.downObj.H}}:{{item.downObj.M}}:{{item.downObj.S}}</div>
                  </div>
                <div class="shopMess">
                  <div class="shopMHead">
                    <h1>{{item.SERVDETAIL_NAME}}</h1>
                    <div class="groupPerson">{{item.GROUPONGOODS_NUM}} 人已拼</div>
                  </div>
                  <div class="shopBC" v-if='item.ZERO_STATUS==1'>
                      <p>[老用户开团成功,此商品免单]</p>
                  </div>
                  <div class="shopB">
                    <div class="shopBL">
                      <span><label>￥</label>{{item.GROUPONGOODS_PRICE.split('.')[0]}}<label v-if='item.GROUPONGOODS_PRICE.indexOf(".")>-1'>.{{item.GROUPONGOODS_PRICE.split('.')[1]}}</label></span><s>￥{{item.SERVDETAIL_PRICE}}</s>
                    </div>
                    <div class="shopBR">
                      <div class="btns1"><span></span>{{item.START_NUM}}人团</div>
                      <div class="btns2">我要开团</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="noMoreDate" v-if='noData1'>
                <div class="noMoreLine"></div>
                <span :class='{noMoreList:selectIndex==0}'>没有更多团购了哟</span>
              </div>
            </div>
          </div>
          <div class="myGroup" v-show='selectIndex==1'>
            <div class="myList">
              <div class='listItem' v-for='item in myList' @click.stop='goOrderDetail(item.ORDER_ID)'>
                <div class="shopMain">
                  <img :src="item.SERVDETAIL_PHOTO">
                  <div class="myGroupMess">
                    <h1>{{item.SERDETAIL_NAME}}</h1>
                    <p>{{item.REMARK}}</p>
                    <div class="price">
                      <span><label>￥</label>{{item.GROUPONGOODS_PRICE}}</span>
                      <s>￥{{item.SERVDETAIL_PRICE}}</s>
                    </div>
                  </div>
                </div>
                <div class="shopType">
                <!-- 3待支付，1拼团成功，2拼团中，0失败，4待开奖，5开奖 -->
                  <span :class='{spanF:item.GROUPON_STATUS==0,spanS:item.GROUPON_STATUS==3||item.GROUPON_STATUS==4,spanI:item.GROUPON_STATUS==1||item.GROUPON_STATUS==2||item.GROUPON_STATUS==5}'>{{item.GROUPON_STATUS_CODE}}</span>
                  <div class="opreateBtn">
                    <div class="orderDetail pay" @click.stop='goOrderDetail(item.ORDER_ID)' v-if='item.GROUPON_STATUS==3&&item.downObj'>去支付(还剩<span v-if='(Number(item.downObj.day*24)+Number(item.downObj.H))>0'>{{Number(item.downObj.day*24)+Number(item.downObj.H)}}小时</span>{{Number(item.downObj.M)}}分{{item.downObj.S}}秒)</div>
                    <div class="orderDetail detail" @click.stop='goOrderDetail(item.ORDER_ID)' v-if='item.GROUPON_STATUS!=3'>订单详情</div>
                    <div class="groupDetail detail" @click.stop='groupDetail(item.GROUPON_USER_ID)' v-if='item.GROUPON_STATUS!=3'>拼团详情</div>
                  </div>
                </div>
              </div>
              <div class="noMoreDate"  v-if='noData2'>
                <div class="noMoreLine"></div>
                <span>没有更多了哟</span>
              </div>
            </div>
            
          </div>
        </scroller>
      </div>
    </div>
    <div class="noUserGroup" v-if='noGroupOrder&&selectIndex==1'>
      <img src="../../assets/image/group/noGroup.png" alt="" />
      <p>您暂无团购商品,赶快去拼团吧~</p>
    </div>
    <shareToast :share='showShare' @close-share='closeShare'></shareToast>
  </div>
</template>
<script>
/*智能保养*/
import {XHeader,Tab, TabItem,Swiper, SwiperItem} from 'vux';
import { setCookie, getCookie,reloads,appid,pushStateUrl,iosAdroidWx} from '../../util/commonUtils';
import shareToast from '../../components/shareToast.vue'; //分享弹框
import download from '../../components/download';
import wx from 'weixin-js-sdk'//微信jssdk
export default {
  name:"groupList",
  // 数据
  data(){

    return{
    	userId:'',
      selectIndex:0,  //选择的的tab索引
      loadColor:'#fff',
      page0:1,//列表
      page1:1,//我的列表
      allList:'',   //所有团购商品
      myList:'',   //获取我的团购商品
      banner:'',  //顶部的广告位
      showShare:false, //分享弹框
      noData1:false, //团购列表1
      noData2:false, //团购列表1
      noGroupOrder:false,  //用户无团购订单
      download:true
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    if(sessionStorage.getItem('reload')){
      sessionStorage.removeItem('reload');
    }else{
      sessionStorage.setItem('reload',1);
      pushStateUrl();
      reloads();
      return;
    }
    this.getBanner();
    this.getShareConfig()
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    goBack(){
      this.$router.go(-1);
    },
    closeDowns(val){
      this.download=false;
      sessionStorage.setItem('closeDown',1);
    },
    showShareClick(){
      this.showShare=true;
    },
    closeShare(){
      this.showShare=false;
    },
    handler(index){
      this.selectIndex=index;
      let that=this;
      if(index==1&&!this.userId){
        this.$vux.confirm.show({
            title:'提示',
            content:'亲，请登录',
            onConfirm () {
                that.$router.push('/login');
            }
        })
        this.selectIndex=0;
      }else{
        if(this.page1==1){
          this.getMyGroup();
        }
      }

    },
    //分享文案获取
    getShareConfig(){
      this.$fetchPost('/Groupon/getGrouponShareSetInfo.action',{
          GROUPON_ID:1
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.getConfig(res.TITLE,res.INTRODUCE,res.ICON,res.URL);
          }
        },err=>{
          console.log(err);
        })
    },
    //轮询所有团购商品计算时间
    checkAllGroup(){
      for(var i=0;i<this.allList.length;i++){
        var times=new Date().getTime();
        let day=0;
        let H=0;
        let M=0;
        let S=0;
        if(times>=this.allList[i].CLOSE_TIME){
          this.allList.splice(i,1);
        }else{
          day=parseInt((this.allList[i].CLOSE_TIME-times)/(24*60*60*1000));
          H=parseInt((this.allList[i].CLOSE_TIME-times-day*24*60*60*1000)/(60*60*1000));
          M=parseInt((this.allList[i].CLOSE_TIME-times-day*24*60*60*1000-H*60*60*1000)/(60*1000));
          S=parseInt((this.allList[i].CLOSE_TIME-times-day*24*60*60*1000-H*60*60*1000-M*60*1000)/(1000));
          H=this.filterNum(H);
          M=this.filterNum(M);
          S=this.filterNum(S);
        }
        this.$set(this.allList[i],'downObj',{day:day,H:H,M:M,S:S});
      }
    },
    checkAllUserGroup(){
      for(var i=0;i<this.myList.length;i++){
        var times=new Date().getTime();
        let day=0;
        let H=0;
        let M=0;
        let S=0;
        if(times>=this.myList[i].CLOSE_TIME){
          
        }else{
          day=parseInt((this.myList[i].CLOSE_TIME-times)/(24*60*60*1000));
          H=parseInt((this.myList[i].CLOSE_TIME-times-day*24*60*60*1000)/(60*60*1000));
          M=parseInt((this.myList[i].CLOSE_TIME-times-day*24*60*60*1000-H*60*60*1000)/(60*1000));
          S=parseInt((this.myList[i].CLOSE_TIME-times-day*24*60*60*1000-H*60*60*1000-M*60*1000)/(1000));
          H=this.filterNum(H);
          M=this.filterNum(M);
          S=this.filterNum(S);
        }
        this.$set(this.myList[i],'downObj',{day:day,H:H,M:M,S:S});
      }
    },
    filterNum(num){
      return num>=10?num:'0'+num
    },
    activeGo(url){
      location.href=url;
    },
    getBanner(){
      var region=sessionStorage.getItem('city');
      if(!region){
        region='深圳';
      }
      this.$fetchPost('/CommonService/getGrouponRegion.action',{
          REGION:region,
          CATEGORY:'GROUPON_IMAGES'
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.banner=res.REGIINADVS;
          }
        },err=>{
          console.log(err);
        })
    },
    //获取我的拼团数据
    getMyGroup(){
      this.$vux.loading.show({
       text: ''
      });
      this.loadColor='#efeff4';
      this.$fetchPost('/Groupon/getUserGrouponList.action',{
          USER_ID:this.userId,
          PAGE_NO:this.page1,
          PAGE_SIZE:10
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.$vux.loading.hide();
            this.myList=res.GROUPON_USER_LIST;
            if(res.GROUPON_USER_LIST.length<10){
              this.$refs.myScroller.finishInfinite(2);
              if(res.GROUPON_USER_LIST.length>0){
                this.noData2=true;
              }else{
                this.noGroupOrder=true;
              }
            }else{
              this.page1++;
              this.$refs.myScroller.finishInfinite();
            }
            setInterval(()=>{
              this.checkAllUserGroup();
            },500)
          }
        },err=>{
          console.log(err);
        })
    },
    //获取我的拼团数据上拉加载
    getMyGroupMore(){
      if(this.page1==1){
        return;
      }
      this.loadColor='#aaa';
      this.$fetchPost('/Groupon/getUserGrouponList.action',{
          USER_ID:this.userId,
          PAGE_NO:this.page1,
          PAGE_SIZE:10
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.myList=this.myList.concat(res.GROUPON_USER_LIST);
            
            if(res.GROUPON_USER_LIST.length<10){
              this.$refs.myScroller.finishInfinite(2);
              this.noData2=true;
            }else{
              this.$refs.myScroller.finishInfinite();
            }
            this.page1++;
          }
        },err=>{
          console.log(err);
        })
    },
    //获取所有团购商品列表（第一次）
    getList(){
      let obj={};
      this.loadColor='#fff';
      this.$vux.loading.show({
       text: ''
      });
      this.$fetchPost('/Groupon/getGrouponGoodsList.action',{
          PAGE_NO:this.page0,
          PAGE_SIZE:10
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.$vux.loading.hide();
            this.allList=res.GROUPONGOODS_DATA;
            setInterval(()=>{
              this.checkAllGroup();
            },500)
            if(res.GROUPONGOODS_DATA.length<10){
              this.loadColor='#aaa';
              this.$refs.myScroller.finishInfinite(2);
              if(res.GROUPONGOODS_DATA.length>0){
                this.noData1=true;
              }
            }else{
              this.page0++;
              this.$refs.myScroller.finishInfinite();
            }
            
          }
        },err=>{
          console.log(err);
        })
    },
    //上拉刷新
    getMordeList(){
      this.loadColor='#aaa';
      if(this.page0==1){
        return;
      }
      this.$fetchPost('/Groupon/getGrouponGoodsList.action',{
        PAGE_NO:this.page0,
        PAGE_SIZE:10
      }).then(res=>{
          if(res.STATUS_CODE==1){
            this.allList=this.allList.concat(res.GROUPONGOODS_DATA);
            if(res.GROUPONGOODS_DATA.length<10){
              this.$refs.myScroller.finishInfinite(2);
              this.noData1=true;
            }else{
              this.$refs.myScroller.finishInfinite();
            }
            this.page0++;
          }
        },err=>{
          console.log(err);
        })
    },
    infinites(){
      if(this.selectIndex==0){
        if(this.page0==1){
          this.getList();
        }else{
          this.getMordeList();
        }
      }else if(this.selectIndex==1&&this.userId){
        if(this.page1==1){
          return;
        }else{
          this.getMyGroupMore();
        }
      }
      
    },
    //去团购商品详情
    goGroupDetail(id){
      this.$router.push('/shopDetail/'+id);
    },
    //去团购订单详情
    goOrderDetail(id){
      this.$router.push('/gOrderDetail/'+id);
    },
    //去拼团详情
    groupDetail(id){
      this.$router.push('/groupDetail/'+id);
    },
    //获取微信的配置信息
    getConfig(title,desc,imgUrl,linkUrl){
      let timestamp,nonceStr,signature;
      // let desc='智能控温加热坐垫告别冬季，不用89，现双十二拼团价只需49元';
      // let title='双十二最强拼团季，让这个冬季不在寒冷';
      // let imgUrl='http://121.40.78.200/pic/act/cover/20141123_pt_share_icon.jpg';
      let urls=iosAdroidWx().urls;
      let appid=iosAdroidWx().appid;
      this.$fetchPost(urls,{'url' : window.location.href},{emulateJSON:true})
      .then(res=>{
        var data = res;
        console.log(res);
        // timestamp = data.timestamp;
        // nonceStr =  data.nonceStr;
        // signature = data.signature;
        timestamp=data.NOW_TIME;
        nonceStr=data.NONCESTR;
        signature=data.SKEY;
        // console.log(timestamp,nonceStr,signature,appId)
        wx.config({
            debug : false, // 开启调试模式,false调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId :appid, // 必填，公众号的唯一标识
            timestamp : timestamp, // 必填，生成签名的时间戳
            nonceStr : nonceStr, // 必填，生成签名的随机串
            signature : signature,// 必填，签名，见附录1
            jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage','chooseWXPay', 'showOptionMenu' ]
        });
        let that=this;
        // let linkUrl=location.href;
        wx.ready(function(){
          // 分享给朋友
          wx.onMenuShareAppMessage({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          }); 

          //分享朋友圈
          wx.onMenuShareTimeline({
            title: title,
            desc: desc,
            link: linkUrl,
            imgUrl: imgUrl,
            trigger: function (res) {
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
              alert(JSON.stringify(res));
            }
          });
        })
      },err=>{

      });
    }
  },
  // 子组件
  components:{
    XHeader,Tab, TabItem,Swiper, SwiperItem,shareToast,download
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.groupListLoad{
  .header{
    top: 0.88rem!important;
  }
  .groupLists{
      .shopList{
        padding-top: 2.52rem!important;
      }
  }
  .myGroup{
    padding-top: 2.52rem!important;
  }
}
.groupList{
  background: #fff;
  min-height: 100%;
  .noUserGroup{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1.64rem;
    width: 5rem;
    transform:translate(-50%,-50%);
    img{
      height: 1.64rem;
      width: 1.9rem;
      display: block;
      margin: 0 auto;
    }
    p{
      font-size: 0.26rem;
      color: #999;
      padding-top: 0.2rem;
    }
  }
  .allMain{
    height: 100%;
    min-height: 100%;
  }
  .groupLists{
    height: 100%;
    min-height: 100%;
  }
  .shopList{
    background: #fff;
    padding-top: 1.64rem;
  }
  .noMoreDate{
    position: relative;
    height: 0.6rem;
    margin-bottom:-1rem;
    z-index: 999;
    padding-top: 0.3rem;
    .noMoreLine{
      width: 2.9rem;
      margin: 0 auto;
      height: 0.02rem;
      background: #777;
      transform:scaleY(0.5);
    }
    span{
      font-size: 0.22rem;
      color: #666;
      padding: 0 0.1rem;
      position: absolute;
      background: #efeff4;
      transform:translate(-50%,-50%);
    }
    .noMoreList{
      background: #fff!important;
    }
  }
  .myGroup{
    padding-top: 1.68rem;
    .myList{
      
      .listItem{
        border-bottom: 0.2rem solid #EFEFF4;
        background: #fff;
        .shopType{
          padding-left: 0.45rem;
          height: 0.88rem;
          display: flex;
          justify-content:space-between;
          align-items:center;
          span{
            font-size: 0.28rem;
            color: #666;
          }
          .spanF{
            color: #666666;
          }
          .spanS{
            color: #F22E2E;
          }
          .spanI{
            color: #66CC22;
          }
          .opreateBtn{
            display:flex;
          }
          .detail{
            width: 1.36rem;
            height: 0.5rem;
            line-height: 0.55rem;
            color: #666;
            font-size: 0.26rem;
            border-radius: 0.1rem;
            .borderFu(#999,0.2rem);
            margin-right:0.2rem;
          }
          .pay{
            padding: 0 0.1rem;
            height: 0.5rem;
            line-height: 0.55rem;
            color: #ec2121;
            font-size: 0.26rem;
            border-radius: 0.1rem;
            .borderFu(#ec2121,0.2rem);
            margin-right:0.2rem;
            span{
              color: #ec2121;
            }
          }
        }
        .shopMain{
          display: flex;
          padding: 0.4rem 0.2rem 0.2rem 0rem;
          margin-left: 0.4rem;
          .borderBDFu(#ede9e9);
          img{
            min-width: 1.7rem;
            width: 1.7rem;
            height: 1.5rem;
          }
          .myGroupMess{
            width: 100%;
            padding:0 0.2rem;
            position: relative;
            text-align: left;
            h1{
              font-size: 0.3rem;
              color: #222;
              margin-bottom: 0.1rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow:ellipsis;
              width: 90%;
            }
            p{
              font-size: 0.24rem;
              color: #999;

            }
            .price{
              display: flex;
              position: absolute;
              bottom: 0.1rem;
              align-items:center;
              span{
                font-size: 0.3rem;
                color: #ec2121;
                padding-right: 0.1rem;
                label{
                  font-size: 0.22rem;
                }
              }
              s{
                color: #666;
                font-size: 0.26rem;
                label{
                  font-size: 0.2rem;
                }
              }
            }
          }
        }
      }
    }
  }
  .allList{
    width: 7rem;
    margin: 0 auto;
    padding: 0.3rem 0 0.1rem 0;
    background: #fff;
    .listItem{
      margin-bottom: 0.3rem;
      .borderFu(#e1e2df,0.3rem);
      border-radius: 0.15rem;
      padding-bottom: 0.2rem;
    }
    .listItem:last-child{
      margin-bottom: 0;
    }
    .shopHead{
      background: #F7F7F7;
      position: relative;
      img{
        width: auto;
        margin: 0 auto;
        height: 3rem;
        display: block;
      }
      
      .downTime{
        height: 0.36rem;
        font-size: 0.22rem;
        color: #666;
        position: absolute;
        top: 0.2rem;
        left: 0rem;
        line-height: 0.36rem;
        z-index: 222;
        color:#fff;
        padding: 0 0 0 0.1rem;
        text-align: left;
        width: 2.06rem;
        background: url(../../assets/image/group/times.png) no-repeat;
        background-size: 2.06rem 0.36rem;
      }
      .downTimeDay{
        width: 2.46rem;
        background: url(../../assets/image/group/days.png) no-repeat;
        background-size: 2.46rem 0.36rem;
      }
    }
    .shopMess{
      .shopMHead{
        display: flex;
        justify-content:space-between;
        margin: 0.1rem 0 0.15rem 0;
        h1{
          font-size: 0.32rem;
          color: #222;
          padding-left: 0.2rem;
          text-align: left;
          width: 75%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .groupPerson{
          padding-right: 0.2rem;
          font-size: 0.26rem;
          color: #888;
        }
      }
      .shopBC{
          font-size: 0.24rem;
          color: #F22E2E;
          text-align: left;
          padding: 0rem 0.2rem;
          margin: -0.1rem 0 0.1rem 0;
      }
      .shopB{
        display: flex;
        justify-content:space-between;
        align-items:center;
        padding:0 0.2rem;
        .shopBL{
          display: flex;
          align-items:baseline;
          span{
            font-size: 0.36rem;
            font-weight: bold;
            color: #ec2121;
            label{
              font-size: 0.26rem;
            }
            padding-right:0.15rem;
          }
          s{
            font-size: 0.24rem;
            color: #999;
          }
        }
        .shopBR{
          display: flex;

          .btns1{
            width: 1.53rem;
            height: 0.6rem;
            font-size: 0.26rem;
            line-height: 0.6rem;
            color: #F83F3F;
            border-top-left-radius: 0.1rem;
            border-bottom-left-radius: 0.1rem;
            border:1px solid #f83f3f;
            background: #fff;
            span{
              width: 0.31rem;
              height:0.26rem;
              display: inline-block;
              background: url(../../assets/image/group/person.png) no-repeat;
              background-size: 0.31rem 0.26rem;
              margin-right: 0.1rem;
            }
          }
          .btns2{
            width: 1.53rem;
            height: 0.6rem;
            line-height: 0.6rem;
            font-size: 0.26rem;
            color: #fff;
            background: #F83F3F;
            border-top-right-radius: 0.1rem;
            border-bottom-right-radius: 0.1rem;
          }
        }
      }
    }
  }
  .wx{
    width: 0.33rem;
    height: 0.34rem;
  }
  
  .header{
    position: fixed;
    top: 0;
    width: 7.5rem;
    z-index: 999;
    .tabSpan{
      width: 100%;
      height: 0.6rem;
      line-height: 0.6rem;
      margin-top: 0.12rem;
      display: block;
      font-size: 0.3rem;
    }
    .tabSpans{
      border-left: 1px solid #E2E2E2;
    }
  }
  .swiperImg{
    width: 7.5rem;
    height: 3rem;
  }
}
.groupListActive{
  background: #efeff4;
}
</style>